<template>
  <div class="header">
    <div class="one"></div>
    <div class="two">
      <p>芝罘区新能源公务出行数据分析平台</p>
      <div></div>
    </div>
    <div class="three">
      <TimeCanvas />

      <div class="imgfang" @click="fangda">
        <div class="show">
          <img src="@/assets/datav/enlarge.png" v-if="!isShow" alt="" />
          <img src="@/assets/datav/narrow.png" v-if="isShow" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeCanvas from "@/components/timeCanvas";
export default {
  name: "HeaderView",
  components: { TimeCanvas },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    fangda() {
      this.isShow = !this.isShow;
      if (!document.fullscreenElement) {
        this.enterFullScreen();
      } else {
        this.exitFullScreen();
      }
    },
    enterFullScreen() {
      let element = document.documentElement;
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        /* Firefox */
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        /* Chrome, Safari & Opera */
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        /* IE/Edge */
        element.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        /* IE/Edge */
        document.msExitFullscreen();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  height: 75px;
  width: 100%;
  display: flex;
  div {
    height: 60px;
  }
  .one,
  .three {
    width: 49%;
    height: 75px;
  }
  .three {
    width: 49%;
    .imgfang {
      position: absolute;
      cursor: pointer;
      right: 0;
      top: 0;
      width: 90px;
      height: 90px;
      .show {
        width: 90px;
        height: 90px;
        display: none;
        text-align: center;
        line-height: 90px;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        img {
          width: 60px;
          height: 60px;
          margin-top: 15px;
        }
      }
    }
    .imgfang:hover .show {
      display: block;
    }
  }
  .two {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    p {
      margin: 0;
      color: rgb(30, 255, 255);
      font-size: 36px;
      font-weight: lighter;
    }
    div {
      position: absolute;
      width: 100%;
      transform: rotate(0deg);
      opacity: 1;
      pointer-events: auto;
      background: url(./../../../../assets/datav/textBom.gif);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center 49%;
      top: 42px;
    }
  }
}
</style>
